*{
    margin: 0;
    padding: 0;
    list-style: none;
    user-select: none;
}

body {
    background-color: #000;
}

#pic {
    margin: 300px auto;
    height: 250px;
    transform-style:preserve-3d;
    perspective:800px; 
    transform: translate(0);
    transition:0.8s;
    position:relative;
}

#pic img {
    position:absolute; 
    cursor: pointer;
    width: 300px;
    height: 250px;
    transition:0.8s;
    margin: 0 -100px;
    -webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(0,0,0,0.1),rgba(0,0,0,0.5));
}

#pic img.left{
    transform: rotateY(45deg) translateZ(-100px);
}

#pic img.right{
    transform:rotateY(-45deg) translateZ(-100px);
}

#pic img.now {
    transform:translateZ(100px);
}